<template>
  <div class="error-page">
    <div class="box">
      <img src="../../assets/images/404.png">
      <h1 class="msg">您访问的页面不存在哦，请返回首页吧～</h1>
      <router-link class="link" to="/home">返回首页</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.error-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .msg {
      margin-top: 66px;
      font-size: 20px;
      color: #333;
    }
    .link {
      display: inline-block;
      margin-top: 58px;
      width: 160px;
      height: 48px;
      line-height: 48px;
      color: #ffffff;
      font-size: 20px;
      text-decoration: none;
      background: $green;
      border-radius: 48px;
      &:hover {
        background: $green_l;
      }
      &:active {
        background: $green_d;
      }
    }
  }
}
</style>
